<template>
    <div class="main">
        <el-calendar v-model="starttime" >
            <template slot="dateCell" slot-scope="{date,data}">
                <div :class="btn(data) && arr[btn(data).allocationSum] || 'on'">
                    <div class="date-number">{{ data.day.split('-').slice(2).join('-') }}</div>
                    <div  class="date-value" v-if="btn(data) && btn(data).allocationSum === 1">{{getValue(data.day.split('-').join('-'))}}</div>
                </div>
            </template>
        </el-calendar>
    </div>
</template>

<script>
import {currentGET} from "api";
import {mapState} from "vuex";
export default {
    props: ['childMessage'],
    data() {
        return {
            starttime: '',
            arr: { 1: 'highlight'},
        };
    },
    watch: {
        starttime: {//监听月份变化
            handler(newValue, oldValue) {
                console.log(newValue, "newValue");
                console.log(this.formatCurrentDate2(newValue),"this.formatCurrentDate2(newValue)");
                this.$store.commit('museumInformation/SET_MuseumsSelectedDateDay', this.formatCurrentDate2(newValue));
                let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
                this.determineCurrentMonth();
                console.log(this.determineCurrentMonth(), "this.determineCurrentMonth()");
                if (this.determineCurrentMonth()) {
                    prevBtn3.classList.add('is-disabled'); // 添加类
                    prevBtn3.style.opacity = '0.5'; // 添加行内样式
                    prevBtn3.style.color = '#fff'; // 添加行内样式
                    prevBtn3.setAttribute('disabled', 'disabled');
                } else {
                    prevBtn3.classList.remove('is-disabled'); // 添加类
                    prevBtn3.style.removeProperty('opacity');
                    prevBtn3.style.removeProperty('color');
                    prevBtn3.removeAttribute('disabled');
                }
            },
            // immediate: true,
        },
        museumsSelectedDate: {
            handler(newVal, oldVal) {
                // console.log(newVal,"newVal")
                this.starttime = newVal +  '-01';
                // console.log(this.starttime,"this.starttime")
                this.$parent.getProvCalendarYear(newVal);
            }
        }
    },
    computed: {
        ...mapState('museumInformation', [
            'museumsSelectedDate',
        ])
    },
    created() {
        this.starttime = this.formatCurrentDate2(new Date());
    },
    mounted() {
        this.$nextTick(() => {
            // 点击上个月
            let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
            prevBtn1.addEventListener('click', () => {
                console.log('上个月');
                this.getProvCalendarYear();
            })
            // 点击今天
            let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
            // 更改element原生日历组件中按钮文字由今天改成本月
            prevBtn2.innerHTML = '本月';
            prevBtn2.addEventListener('click', () => {
                console.log('今天');
                this.getProvCalendarYear();
            })
            // 点击下个月
            let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
            prevBtn3.classList.add('is-disabled'); // 添加类
            // prevBtn3.style.backgroundImage = 'linear-gradient(to bottom, #8d8d8d, #272727)'; // 添加行内样式
            prevBtn3.style.opacity = '0.5'; // 添加行内样式
            prevBtn3.style.color = '#fff'; // 添加行内样式
            prevBtn3.setAttribute('disabled', 'disabled');
            prevBtn3.addEventListener('click', () => {
                console.log('下个月');
                this.getProvCalendarYear();
            });
            // 点击下个月
            let prevBtn4 = document.querySelector('.el-calendar-table');
            prevBtn4.addEventListener('click', () => {
                console.log('日历');
                this.getProvCalendarYear();
            });
        });
    },
    beforeDestroy() {},
    methods: {
        btn(data) {
            // console.log(this.getCurrentMonthDates(), "this.getCurrentMonthDates()");
            return this.childMessage.find(item => item.times === data.day)
        },
        // 获取当前月份所有的日期
        getCurrentMonthDates() {
            const currentDate = new Date(); // 获取当前日期对象
            const year = currentDate.getFullYear(); // 获取当前年份
            const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从 0 开始，所以要加 1）

            const firstDay = new Date(year, month - 1, 1); // 当月的第一天
            const lastDay = new Date(year, month, 0); // 当月的最后一天

            const dates = [];
            for (let i = firstDay.getDate(); i <= lastDay.getDate(); i++) {
                const date = new Date(year, month - 1, i);
                const formattedDate = date.toISOString().split("T")[0]; // 格式化日期为 "YYYY-MM-DD"
                dates.push(formattedDate);
            }

            return dates;
        },
        // 转化日期格式 年-月
        formatCurrentDate(currentDate) {
            currentDate = new Date(currentDate);
            // const currentDate = new Date(); // 获取当前日期对象
            const year = currentDate.getFullYear(); // 获取年份
            const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
            const day = String(currentDate.getDate()).padStart(2, '0'); // 获取日期并补零
            const formattedDate = `${year}-${month}`; // 格式化日期为 "yyyy-MM-dd"
            return formattedDate;
        },
        // 转化日期格式 年-月-日
        formatCurrentDate2(currentDate) {
            if (currentDate){
                return new Date(currentDate).toISOString().split('T')[0]
            }else {
                return new Date().toISOString().split('T')[0]
            }
        },
        // 调用父组件接口
        getProvCalendarYear() {
            const formattedDate = this.formatCurrentDate(this.starttime);
            console.log('formattedDate', formattedDate);
            this.$parent.getProvCalendarYear(formattedDate);
        },
        // 有value值的显示值
        getValue(index) {
            // let i = Number(index);
            // return this.childMessage[i - 1].value;
            return this.childMessage.find(item => item.times === index).value;
        },
        // 点击下个月按钮时 判断当前选择的月份是不是本月
        determineCurrentMonth() {
            const currentDate = new Date(); // 获取当前日期对象
            const year = currentDate.getFullYear(); // 获取年份
            const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
            const day = String(currentDate.getDate()).padStart(2, '0'); // 获取日期并补零
            const formattedDate = `${year}-${month}`; // 格式化日期为 "yyyy-MM-dd"
            const formattedDate2 = this.formatCurrentDate(this.starttime);
            console.log(formattedDate, "formattedDate");
            console.log(formattedDate2, "formattedDate2");
            return formattedDate === formattedDate2;
        },
    },
};
</script>
<style lang='scss' scoped>
.main {
    position: relative;
    width: 100%;
    height: 330px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    //margin: 22px 0 0 46px;
}

.on {
    color: #59606b;
    opacity: 0.5;
}
.black {
    color: black;
}
.highlight {
    color: #FFF;
}
.red {
    color: red;
}

.date-number {
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    padding-left: 10px;
}

.date-value {
    color: #8ebfe8;
    //text-align: left;
    font-size: 12px;
    //font-weight: 600;
    padding-left: 10px;
}

::v-deep .el-calendar{
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

::v-deep .el-calendar__header {
    border-bottom: 0px;
}

::v-deep .el-calendar__title {
    color: #d9fcfb;
}


::v-deep .el-calendar-table td.is-selected {
    background-color: rgba(0, 0, 0, 0);
}

::v-deep .el-calendar-table td.is-selected {
    background: linear-gradient(to bottom, #536f97, #2b394d);
}

::v-deep .el-calendar-table .el-calendar-day:hover {
    //background-color: rgba(0, 0, 0, 0);
    background: linear-gradient(to bottom, #536f97, #2b394d);
}

::v-deep .el-calendar-table    {
    td {
        border: 2px solid #2e3d4f;
    }
    tr td:first-child {
        border: 2px solid #2e3d4f;
    }
    tr:first-child td {
        border: 2px solid #2e3d4f;
    }

}

::v-deep .el-calendar-table thead {
    background: linear-gradient(to bottom, #2b394d, transparent);

    th {
        color: #FFF;
    }
}

::v-deep .el-calendar-table .el-calendar-day{
    width: 100%;
    height: 40px;
    text-align: center;
}

::v-deep .is-disabled{
    color: #999;
}

::v-deep .el-calendar__button-group .el-button-group>button {
    color: #fff;
    height: 28px;
    background-image: linear-gradient(to bottom, #8ebfe8, #002450);
    border: #8ebfe8;

    &:hover {
        color: #c8e4fa;
        transform: scale(1.01);
    }

    &.selected {
        color: #c8e4fa;
        //transform: scale(1.1);
    }
}
</style>
